<template>
	<view>
		<!-- <uni-fab ref="fab" :pattern="pattern" :content="null" :horizontal="horizontal" :vertical="vertical" :direction="direction" @fabClick="fabClick" /> -->
		<l-fab :offset="offset" axis="xy" magnetic="x" @click="fabClick">
			<uni-icons type="plusempty" size="30" color="#fff"></uni-icons>
		</l-fab>

		<swiper class="banner-list" circular autoplay>
			<swiper-item v-for="item in bannerList" :key="item.l_id" class="flex">
				<image :src="item.image"></image>
			</swiper-item>
		</swiper>

		<view class="container-main">
			<view class="screen flex-between flex-align-items">
				<view class="screen-left flex">
					<view v-for="item in statusList" :key="item.value" class="font-28-M"
						:class="{ active: item.value === form.status }" @click="statusChange(item.value)">
						{{ item.label }}
					</view>
				</view>
				<picker mode="multiSelector" :range="typeList" range-key="name" @columnchange="bindTypeColumnchange"
					@change="bindTypeChange" @click="bindPickerInit">
					<view class="screen-right flex flex-align-items">
						<text class="screen-right-label font-28-B">
							{{ form.typeLabel !== '' ? form.typeLabel : '类型选择' }}
						</text>
						<uni-icons type="bottom" size="20" color="#BBB"></uni-icons>
					</view>
				</picker>
			</view>

			<view class="list">
				<no-data v-if="list.length === 0" type="1"></no-data>
				<view v-for="item in list" :key="item.id" class="item" @click="toDetail(item.id)">
					<view class="item-problem font-32-B">
						<text class="font-24-B">问</text>{{ item.content }}
					</view>
					<view v-if="item.hot" class="item-lawyer flex-between flex-align-items">
						<view class="item-lawyer-left flex flex-align-items">
							<image :src="item.hot.avatar"></image>
							<text class="font-30-B">{{ item.hot.name }}</text>
						</view>
						<view class="item-lawyer-right font-24-M">从业{{ item.hot.year }}年</view>
					</view>
					<view v-if="item.hot" class="item-answer font-28-M">
						<text class="font-24-B">答</text>{{ item.hot.content }}
					</view>
					<view v-if="item.hot" class="item-time flex-between flex-align-items">
						<view class="item-time-left font-24-M">{{ item.hot.createtime }}</view>
						<view class="item-time-right font-24-M color-main1">#{{ item.clt }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onReachBottom,
		onPullDownRefresh,
		onShareAppMessage
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import api from '@/api/index.js';

	onShareAppMessage(() => {});

	const bannerList = ref('');
	const typeList = ref([]);
	const statusList = ref([{
			label: '广场',
			value: 1
		},
		{
			label: '最新',
			value: 2
		}
	]);

	const pattern = ref({
		color: '#7A7E83',
		backgroundColor: '#333',
		selectedColor: '#007AFF',
		buttonColor: '#007AFF',
		iconColor: '#333'
	});
	const horizontal = ref('left');
	const vertical = ref('bottom');
	const direction = ref('horizontal');
	const form = ref({
		page: 1,
		page_size: 10,
		last_page: 0,
		status: 1,
		plt_id: null,
		clt_id: null,
		typeLabel: ''
	});
	const list = ref([]);
	const offset = ref({
		x: 220,
		y: 425
	});
	const onOffsetChange = (offset) => {
		showToast(offset.x + '__' + offset.y);
	};
	// 初始化
	const init = () => {
		form.value.page = 1;
		form.value.last_page = 0;
		queryMsgRecommend();
		getBanner();
	}
	// 获取轮播图
	const getBanner = () => {
		api.base.getBanner({
			postion: 2
		}).then(res => {
			bannerList.value = res;
		});
	}
	const statusChange = status => {
		if (form.value.status !== status) {
			form.value.status = status;
			init();
		}
	}
	// 法律类型
	const getLegalType = () => {
		api.base.getLegalType().then(res => {
			typeList.value = [res, res[0].children];
		});
	}
	// 类型选择列改变
	const bindTypeColumnchange = e => {
		if (e.detail.column === 0) {
			typeList.value[1] = typeList.value[0][e.detail.value].children;
		}
	}
	// 切换类型
	const bindTypeChange = e => {
		form.value.typeLabel = typeList.value[1][e.detail.value[1]].name;
		form.value.plt_id = typeList.value[0][e.detail.value[0]].id;
		form.value.clt_id = typeList.value[1][e.detail.value[1]].id;
		init();
	}
	// 多行文本框初始化
	const bindPickerInit = () => {
		typeList.value[1] = typeList.value[0][0].children;
	}
	// 推荐列表
	const queryMsgRecommend = () => {
		let currentApi = null;
		if (form.value.status === 1) {
			currentApi = api.leaveWord.queryMsgRecommend(form.value);
		} else {
			currentApi = api.leaveWord.queryMsgLatest(form.value);
		}
		currentApi.then(res => {
			list.value = form.value.page === 1 ? res.data : list.value.concat(res.data);
			form.value.last_page = res.last_page;
		});
	}
	// 跳转详情页
	const toDetail = id => {
		uni.navigateTo({
			url: `/pagesA/infoSquare/detail?id=${id}`
		})
	}
	const fabClick = () => {
		uni.navigateTo({
			url: '/pagesA/leaveWord/add'
		});
	};
	onShow(() => {
		form.value.typeLabel = '';
		form.value.plt_id = null;
		form.value.clt_id = null;
		getLegalType();
		init();
	});
	onReachBottom(() => {
		if (form.value.page < form.value.last_page) {
			form.value.page += 1;
			queryMsgRecommend();
		}
	});
	onPullDownRefresh(() => {
		getLegalType();
		init();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	});
</script>

<style lang="less" scoped>
	.banner-list {
		height: 420rpx;

		swiper-item {
			width: 100%;
			height: 420rpx;

			image {
				width: 100%;
				height: 420rpx;
			}
		}
	}

	.container-main {
		position: relative;
		bottom: 24rpx;
		z-index: 10;
	}

	.screen {
		background: #fff;
		padding: 24rpx;
		margin-bottom: 24rpx;
		border-radius: 24rpx;

		.screen-left {
			view {
				width: 120rpx;
				height: 56rpx;
				background: #f6f6f6;
				border-radius: 4rpx;
				color: #333;
				text-align: center;
				line-height: 56rpx;
				margin-right: 16rpx;

				&:last-child {
					margin-right: 0;
				}

				&.active {
					background: rgba(72, 106, 239, 0.16);
					color: #486aef;
				}
			}
		}

		.screen-right {
			.screen-right-label {
				color: #333;
				margin-right: 8rpx;
			}
		}
	}

	.list {
		.item {
			border-radius: 24rpx;
			padding: 24rpx 32rpx;
			margin-bottom: 24rpx;
			background: #fff;

			.item-problem {
				color: #333;
				line-height: 1.5;

				text {
					display: inline-block;
					width: 40rpx;
					height: 40rpx;
					border-radius: 4rpx;
					margin-right: 8rpx;
					text-align: center;
					line-height: 40rpx;
					color: #fff;
					background: #486aef;
				}
			}

			.item-lawyer {
				border-top: 2rpx solid #f3f3f3;
				padding: 20rpx 0;
				margin-top: 20rpx;

				.item-lawyer-left {
					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					text {
						color: #333;
					}
				}

				.item-lawyer-right {
					height: 46rpx;
					padding: 0 16rpx;
					background: #f6f6f6;
					border-radius: 4rpx;
					color: #333;
					line-height: 46rpx;
				}
			}

			.item-answer {
				color: rgba(0, 0, 0, 0.75);
				line-height: 1.5;
				margin-bottom: 20rpx;

				text {
					display: inline-block;
					width: 40rpx;
					height: 40rpx;
					background: #333;
					border-radius: 4rpx;
					color: #fff;
					text-align: center;
					line-height: 40rpx;
					margin-right: 8rpx;
				}
			}

			.item-time-left {
				color: #999;
			}
		}
	}
</style>